<template>
	<view>
		<view class="header">
			<view class="left">
				<image :src="userifor.avatar?userifor.avatar:'../../static/mine/mine_header.png'"></image>
			</view>
			<view class="right" @click="open_set">
				<view class="name">{{userifor.nickname}}</view>
				<view class="markval">{{userifor.sex?(userifor.sex==1?'男':'女'):'未知'}}</view>
			</view>
		</view>
		<view class="gridcont">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(listItem, listIndex) in tablist" :key="listIndex" @click="click_nav(listItem)">
					<image class="icon" :src="listItem.imgUrl"></image>
					<text class="grid-text">{{ listItem.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="bottmlist">
			<view class="bottm-one" @click="open_idea">
				<view class="l">
					<image src="../../static/mine/icon_yijianfankui.png"></image>
					意见反馈
				</view>
				<view class="r">
					<image src="../../static/mine/icon_jinru.png"></image>
				</view>
			</view>
			<view class="bottm-one" style="border: none" @click="open_about">
				<view class="l">
					<image src="../../static/mine/icon_guanyuwomen.png"></image>
					关于我们
				</view>
				<view class="r">
					<image src="../../static/mine/icon_jinru.png"></image>
				</view>
			</view>
		</view>
		<view class="exc-tui" @click="login_ex">退出登录</view>
	</view>
</template>

<script>
	import { userget } from '@/api/mine.js';
export default {
	data() {
		return {
			userifor:[],
			tablist: [
				{
					imgUrl: '../../static/index/icon01.png',
					title: '我的咨询',
					url: '/pages/mine/mineconsult/mineconsult'
				},
				{
					imgUrl: '../../static/index/icon02.png',
					title: '我的帮扶申请',
					url: '/pages/mine/minehelp/minehelp'
				},
				{
					imgUrl: '../../static/index/icon03.png',
					title: '我的救助申请',
					url: '/pages/mine/berescued/berescued'
				}
			]
		};
	},
	onShow() {
		this.get_user()
	},
	methods:{
		open_idea(){
			uni.navigateTo({
				url:"/pages/mine/idea/idea"
			})
		},
		open_about(){
			uni.navigateTo({
				url:"/pages/mine/about/about"
			})
		},
		open_set(){
			uni.navigateTo({
				url:"/pages/mine/seting/seting"
			})
		},
		get_user(){
			userget().then((res) => {
				this.userifor = res.data
			});
		},
		login_ex(){
			uni.removeStorageSync('Authorization')
			uni.removeStorageSync('refreshToken');
			uni.removeStorageSync('userId');
			uni.$u.toast('退出成功')
			setTimeout(() => {
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}, 1000)
		},
		click_nav(item) {
			uni.navigateTo({
				url:item.url
			})
		},
	}
};
</script>

<style lang="scss">
.header {
	display: flex;
	background-color: #ffffff;
	padding: 24rpx;
	.left {
		width: 160rpx;
		position: relative;
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			display: block;
		}
	}
	.right {
		margin-left: 28rpx;
		width: 470rpx;
		background: url('../../static/mine/icon_jinru.png') no-repeat;
		background-position: center right;
		background-size: 48rpx 48rpx;
		.name {
			line-height: 44rpx;
			margin-top: 16rpx;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			font-weight: bold;
		}
		.markval {
			color: #666666;
			font-size: 26rpx;
			margin-top: 8rpx;
			line-height: 36rpx;
			min-height: 72rpx;
			display: flex;
		}
	}
}
.gridcont {
	background-color: #ffffff;
	padding: 22rpx 0;
	margin: 24rpx;
	border-radius: 20rpx;
	.icon {
		width: 130rpx;
		height: 130rpx;
		display: block;
		margin-top: 12rpx;
	}
	.grid-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		margin-top: 16rpx;
		margin-bottom: 12rpx;
	}
}
.bottmlist {
	margin: 20rpx 24rpx 0;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 12rpx 24rpx;
	.bottm-one {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 2rpx solid #f4f4f4;
		.l {
			display: flex;
			font-size: 28rpx;
			color: #333333;
			image {
				width: 32rpx;
				height: 32rpx;
				padding: 29rpx 0;
				display: block;
				margin-right: 8rpx;
			}
		}
		.r {
			display: flex;
			image {
				width: 32rpx;
				height: 32rpx;
				display: block;
				padding: 29rpx 0;
			}
		}
	}
}
.exc-tui {
	position: fixed;
	bottom: 40rpx;
	left: 10%;
	width: 80%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background-color: #8BB950;
	border-radius: 40rpx;
	color: #fff;
	/* #ifdef H5 */
	bottom: calc(120rpx + env(safe-area-inset-bottom));
	/* #endif */
}
</style>
